<!-- @format -->

<template>
    <view @tap="click" :style="[containerStyle]" class="e-icon">
      <image v-if="isImg" :src="name" :mode="mode" class="icon-img"></image>
      <text v-else :style="[iconStyle]" :class="customClass" class="iconfont"></text>
    </view>
  </template>

  <script>
  export default {
    name: 'eIcon',
    props: {
      // 图标类名
      name: {
        type: String,
        default: ''
      },
      // 用于占位
      width: {
        type: [String, Number],
        default: ''
      },
      // 用于占位
      height: {
        type: [String, Number],
        default: ''
      },
      // 字体大小 (数字类型默认单位rpx)
      size: {
        type: [Number, String],
        default: '36rpx'
      },
      // icon 颜色 (字体图标生效)
      color: {
        type: String,
        default: ''
      },
      // 是否显示粗体 (字体图标生效)
      bold: {
        type: Boolean,
        default: false
      },
      // 自定义扩展前缀，方便用户扩展自己的图标库 (字体图标生效)
      customPrefix: {
        type: String,
        default: 'icon'
      },
      // 图片的mode (图片生效)
      mode: {
        type: String,
        default: 'aspectFit'
      }
    },
    computed: {
      customClass() {
        return this.customPrefix + this.name
      },
      // 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
      isImg() {
        return this.name.indexOf('/') !== -1
      },
      iconStyle() {
        const { size, color, bold, addUnit } = this
        return {
          fontSize: addUnit(size),
          color,
          fontWeight: bold ? 'bold' : '400'
        }
      },
      containerStyle() {
        const { name, width, height, size, addUnit } = this
        const style = {}
        style.background = name ? '' : '#f6f6f6'
        // 优先使用width和height属性，否则使用size属性
        style.width = width ? addUnit(width) : addUnit(size)
        style.height = height ? addUnit(height) : addUnit(size)
        return style
      }
    },
    methods: {
        number(value) {
            return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
        },
        // 增加单位
		addUnit(value = 'auto', unit = 'rpx') {
			value = String(value);
			return this.number(value) ? `${value}${unit}` : value;
		},
        click() {
            this.$emit('click', this.index)
        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
 
  .e-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-img {
      width: 100%;
      height: 100%;
    }
  }
  </style>
  